import React from 'react'
import { Animated, KeyboardAvoidingView, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native'
import { HEIGHT, IS_IOS, ScaleS } from 'src/utils/ScreenUtil'
import CustomButton from 'src/components/button/CustomButton'
import { showUsefulExpressions } from 'src/utils/ModalUtil'
import BasePage from 'src/pageP/base/base-page'

export default class TestIndex extends BasePage {
  constructor (props) {
    super(props)
    this.state = {
      viewHeight: 0,
      header: null
    }
  }

  childRender () {
    return (
      <View style={{ flex: 1 }} onLayout={this._onLayout}>
        {/*<View style={{*/}
        {/*  position: 'absolute',*/}
        {/*  top: 0,*/}
        {/*  backgroundColor: 'yellow',*/}
        {/*  zIndex: 2,*/}
        {/*  width: '100%',*/}
        {/*  height: 100*/}
        {/*}}/>*/}
        <KeyboardAvoidingView behavior={'position'}>
          <View style={{ height: this.state.viewHeight }}>
            <ScrollView style={{ flex: 1, backgroundColor: 'red' ,marginTop: 100}} contentContainerStyle={{}}>
              <Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Top Area1</Text>
              {/*<Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Top Area2</Text>*/}
              {/*<Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Top Area3</Text>*/}
              {/*<Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Top Area</Text>*/}
              {/*<Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Top Area</Text>*/}
              {/*<Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Top Area</Text>*/}
              {/*<Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Top Area</Text>*/}
              {/*<Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Top Area</Text>*/}
              {/*<Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Top Area</Text>*/}
              {/*<Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Top Area</Text>*/}
              {/*<Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Top Area</Text>*/}
              {/*<Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Top Area</Text>*/}
              {/*<Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Top Area</Text>*/}
              {/*<Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Top Area</Text>*/}
              {/*<Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Top Area</Text>*/}
              {/*<Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Top Area</Text>*/}
              {/*<Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Top Area10</Text>*/}
              {/*<Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Top Area11</Text>*/}
              {/*<Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Top Area12</Text>*/}
              {/*<Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Top Area13</Text>*/}
              {/*<Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Top Area14</Text>*/}
              {/*<Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Top Area15</Text>*/}
            </ScrollView>
            <TextInput
              placeholder="<TextInput />"
              style={styles.textInput}/>
          </View>

        </KeyboardAvoidingView>
      </View>
    )
  }

  _onLayout = (e) => {
    const { viewHeight } = this.state
    const height = e.nativeEvent.layout.height
    console.info('_onLayout', height)
    if (viewHeight < height) {
      this.setState({ viewHeight: height })
    }
  }
  _openModal = () => {
    showUsefulExpressions({
      onSave: this._onSave
    })
  }
}
const styles = StyleSheet.create({
  outerContainer: {
    height: HEIGHT
  },
  container: {
    flex: 1,
    justifyContent: 'center'
  },
  textInput: {
    borderRadius: 5,
    borderWidth: 1,
    height: 44,
    paddingHorizontal: 10,
  }
})
